<template>
    <div class="table-box">
        <Table
        :data="tableObj.list"
        :columns="tableObj.columns"
        :stripe="tableObj.stripe"
        :loading="tableObj.loading"
        >
             <!-- <slot name="status" slot="status" slot-scope="{row, index}" :id="{row, index}"></slot> -->
             <!-- <slot name="action" slot="action" slot-scope="{row, index}" :id="{row, index}"></slot> -->
        </Table>
        <div class="page-box" v-if="tableObj.pageObj.pageSize < tableObj.pageObj.total">
            <Page
            :total="tableObj.pageObj.total"
            :pageSize="tableObj.pageObj.pageSize"
            :current="tableObj.pageObj.page"
            @on-change="changePage"
            />
        </div>
    </div>
</template>
<script>
export default {
    name: 'tableBox',
    props: {
        tableObj: {
            type: Object,
            default () {
                return {
                    list: [],
                    columns: [],
                    loading: false,
                    stripe: false,
                    pageObj: {
                        total: 11,
                        pageSize: 10,
                        page: 1
                    }
                }
            }
        }
    },
    methods: {
        // 切换页
        changePage (page) {
            this.$emit('changePage', page)
        }
    }
}
</script>
<style lang="less" scoped>
.table-box {
    .page-box {
        padding: 15px 0;
        text-align: center;
        /deep/.ivu-page {
            .ivu-page-item {
                &.ivu-page-item-active {
                    border-color: transparent;
                    background: #1298FC;
                    a {
                        color: #fff;
                    }
                }
            }
        }
    }
    /deep/.ivu-table-wrapper {
        border: 0;
        .ivu-table {
            &::before {
                display: none
            }
            &::after {
                display: none;
            }
            .ivu-table-header {
                th {
                    height: 56px;
                    background: #F4F9FC;
                    border-bottom: 0;
                    font-size: 14px;
                }
            }
            .ivu-table-body {
                tr {
                    &:last-child {
                        td {
                            border-bottom: 0;
                        }
                    }
                    td {
                        height: 60px;
                        color: #666;
                        font-size: 14px;
                    }
                }
                
            }
        }
    }
}
</style>